<template>
  <div>
    <h3>watch侦听</h3>
    <p>{{ count }}</p>
    <button @click="fn">btn</button>
    <p>{{ obj }}</p>
  </div>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const count = ref(1);
    const fn = () => {
      // count.value++;
      obj.value.a = 30;
    };

    const obj = ref({
      a: 3,
      b: 4,
    });

    // watch也是一个函数，需要执行
    // 有三个参数，1. 监听的对象 2. 回调函数 3. 是一个对象，可以有deep和immediate
    watch(count, (val, oldVal) => {
      console.log(val);
      console.log(oldVal);
    });

    watch(
      obj,
      (val, oldVal) => {
        console.log(val);
        console.log(oldVal);
      },
      {
        // 设置深度监听
        deep: true,
        // 加载时先做一次
        immediate: true,
      }
    );

    return {
      count,
      fn,
      obj,
    };
  },
};
</script>

<style lang="less" scoped></style>
